<template>
  <view class="flex">
    <tm-sheet
      v-for="(item, index) in files"
      :key="index"
      :margin="[0, 8]"
      :padding="[16]"
      :shadow="1"
      :round="2"
      :border="1"
    >
      <view class="flex flex-row flex-row-center-between">
        <view class="flex flex-col" style="width: 85%" @click="emits('click', item)">
          <tm-text :font-size="28" _class="wrap" class="flex-1 wrap mb-5" :label="item.name"></tm-text>
          <tm-text
            :font-size="24"
            :line-height="0"
            :color="
              item.statusCode == STATUS_CODE.fail || item.statusCode == STATUS_CODE.max
                ? 'red'
                : item.statusCode == STATUS_CODE.success
                ? 'green'
                : ''
            "
            :label="item.status"
          ></tm-text>
        </view>
        <tm-icon
          v-if="!_disabledRemove && !_disabled"
          class="pl-32 flex-shrink"
          color="red"
          name="tmicon-times"
          @click="remove(index)"
        ></tm-icon>
      </view>
    </tm-sheet>

    <tm-sheet
      v-if="!isLimitCount"
      :class="_disabled ? 'opacity-5' : ''"
      :follow-theme="props.followTheme"
      :color="props.color"
      text
      :margin="[0, 8]"
      :padding="[16]"
      :round="2"
      :border="1"
    >
      <view class="flex flex-row flex-row-center-center" @click="chooseFile">
        <tm-icon name="tmicon-plus"></tm-icon>
        <tm-text class="pl-16" label="添加文件"></tm-text>
      </view>
    </tm-sheet>
  </view>
</template>
<script lang="ts" setup>
/**
 * 文件上传
 * @description 不支持nvue,只支持h5,web,微信，qq,字节，飞书相关平台
 */
import {
  computed,
  ref,
  PropType,
  Ref,
  watch,
  toRaw,
  nextTick,
  getCurrentInstance,
  inject,
  reactive,
  onMounted,
  isRef,
  isProxy,
  watchEffect,
} from 'vue'
import { inputPushItem, rulesItem } from './../tm-form-item/interface'
import { USE_UPLOAD_FILE_CONFIG_TYPE, useUploadFile, FILE_TYPE, STATUS_CODE } from './../../tool/useFun/useUploadFile'
import tmImage from '../tm-image/tm-image.vue'
import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import { emit } from 'cluster'
const { config, files, isLimitCount, choose, remove, addFile, addEventListener, uploading } = useUploadFile(null)
const proxy = getCurrentInstance()?.proxy ?? null

const props = defineProps({
  //是否跟随全局主题的变换而变换
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  defaultValue: {
    type: Array as PropType<Array<any>>,
    default: () => [],
  },
  //可以是双向绑定
  modelValue: {
    type: Array as PropType<Array<any>>,
    default: () => [],
  },
  color: {
    type: String,
    default: 'primary',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  /** 禁用删除功能 */
  disabledRemove: {
    type: Boolean,
    default: false,
  },
  /** 当前的上传状态可v-model:uploading,仅单向向外输入状态，不接受双向绑定，通过这个状态来知当前是否所有文件上传完成还是正在运行中。 */
  uploading: {
    type: Boolean,
    default: false,
  },
  config: {
    type: Object as PropType<{
      /**media表示只允许图片或者视频选择，file表示允许任意文件，但只支持h5,微信平台  */
      uploadType?: 'media' | 'file'
      maxCount?: number //文件最大数量。
      extension?: string[] //文件选择的类型。
      type?: 'all' | 'image' | 'video' | 'file' | undefined
      /**只对h5 */
      sourceType?: Array<'album' | 'camera'>
      maxSize?: number //每一个文件上传的最大尺寸，默认为10mb
      hostUrl?: string //上传文件的服务器地址
      autoUpload?: boolean
      header?: { [key: string]: any } //头部参数。
      formData?: { [key: string]: any } //额外的表单数据。
      formName?: string
      code?: number //服务器响应码，如果不为此码，表示上传失败。
      maxDuration?: number //如果选择的类型是视频，可以定制此拍摄的最大时长。仅uploadType为media时有效
      sizeType?: Array<'original' | 'compressed'> //仅对 mediaType 为 image 时有效，是否压缩所选文件,仅uploadType为media时有效
      camera?: 'back' | 'front' //仅在 sourceType 为 camera 时生效，使用前置或后置摄像头,仅uploadType为media时有效
      mediaType?: Array<'image' | 'video'> //注意当uploadType=media时，如果是微信，抖音，飞书这里可以为当前正常类型值；如果是其它平台：只取数组中第一个值，比如要选择图片设置为["image"],视频：["video"],仅uploadType为media时有效
    }>,
    default: () => {
      return {}
    },
  },
})

const emits = defineEmits(['update:modelValue', 'update:uploading', 'click'])
let timeId: any = NaN
const _disabled = computed(() => props.disabled)
const _disabledRemove = computed(() => props.disabledRemove)
addEventListener('change', () => {
  emits('update:uploading', uploading.value)
})

function chooseFile() {
  if (_disabled.value) return
  choose('file')
}
watchEffect(() => {
  config.value = uni.$tm.u.deepObjectMerge(uni.$tm.u.deepClone(config.value), props.config)
})
onMounted(() => {
  initDefault()
})

function initDefault() {
  addFile(props.modelValue)
  emits('update:modelValue', uni.$tm.u.deepClone(files.value))
}
</script>
